<!-- 待开发模块 -->
<template>
  <div class="page_mapList">
    <nav-title title="分 布"></nav-title>
    <div class="map-container">
      <img class="map" src="https://whzsoss.oss-cn-shanghai.aliyuncs.com/2023/10/18/1ac947c391324cb7a4cfd0c903401d91.jpg" alt="">
      <div class="list" :style="{height: height}">
        <div class="drag_line" @click="touchmove"></div>
        <div class="mapList-container">
          <div class="mapList-item" v-for="item in mapList" :key="item.id">
            <div class="aside-left">
              <img :src="item.src" alt="">
            </div>
            <div class="aside-right">
              <div class="name">{{ item.name }}</div>
              <div class="openTime">{{ item.openTime }}</div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
        mapList: [
          {id: 1, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 2, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 3, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 4, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 5, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 6, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 7, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
          {id: 8, src: require('../../../../../static/images/index/grid1.png'), name: '幸福食堂', openTime: '12:00 - 20:00'},
        ],
        height: '60vh',
        flag: true
    }
  },
  onLoad() {
    this.flag = true;
    this.flag = true;
  },
  methods: {
    checkboxChange(e) {
      console.log(e);
    },
    touchmove() {
      this.flag = !this.flag;
      if(this.flag) {
        this.height = '30px'
      } else {
        this.height = '60vh'
      }
      
    }
  },
  onShareAppMessage() {
    return {
      title: '智慧养老',
      path: '/pages/auth/main',
      from: "menu" 
    }
  }
}
</script>

<style lang="scss">
.page_mapList {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .map-container {
    height: 100%;
    position: relative;
    .map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .list {
      width: 100%;
      transition: height 0.2s linear;
      position: absolute;
      background: #fff;
      z-index: 999;
      bottom: 0;
      padding-top: 2px;
      overflow: overlay;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .drag_line {
          width: 50%;
          height: 8px;
          flex-shrink: 0;
          background: red;
          border-radius: 0 0 5px 5px;
          margin: 0 auto;
        }
      .mapList-container {
        height: 100%;
        overflow: overlay;
        border-radius: 40px 40px 0 0;
        .mapList-item {
          height: 80px;
          background: #fff;
          border-bottom: 1px solid #eee;
          padding: 12px;
          display: flex;
          align-items: center;
          .aside-left {
            width: 64px;
            height: 64px;
            flex-shrink: 0;
            margin-right: 12px;
            ._img {
              width: 100%;
              height: 100%;
            }
          }
          
          .aside-right {
            width: 100%;
            .name {

            }
            .openTime {

            }
          }
        }
      }
    }
    
  }
}
</style>
